<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
import resize from './mixins/resize'
import { getToken } from '@/utils/auth'
import { getStationPoint } from '@/api/charts'
import { format2Date } from '@/utils'
import send from '@/utils/send'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '264px'
    }
  },
  data() {
    return {
      chart: null,
      listQuery: {
        token: undefined,
        date: undefined,
        station: '1'
      },
      send: ''
    }
  },
  watch: {
    send: function(newTest, oldTest) {
      console.log('更新后的数据' + this.send)
      this.listQuery.station = JSON.parse(JSON.stringify(this.send))
      console.log('开始执行重构' + this.listQuery.station)
      this.initChart()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    send.$on('sendStation', (sendData) => {
      this.send = sendData
    })
  },
  created() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.listQuery.token = getToken()
      this.listQuery.date = format2Date(new Date(), 'yyyy-MM-dd')
      getStationPoint(this.listQuery).then(response => {
        this.chart.setOption({
          title: {
            text: this.listQuery.station + '的点出入情况',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['进站', '出站'],
            left: 'left'
          },
          toolbox: {
            show: true,
            feature: {
              dataView: { show: false, readOnly: false },
              magicType: { show: false, type: ['line', 'bar'] },
              restore: { show: false },
              saveAsImage: { show: true }
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: response.hour_list
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '进站',
              type: 'bar',
              data: response.in_list,
              markPoint: {
                data: [
                  { type: 'max', name: '最大值', value: response.in_max },
                  { type: 'min', name: '最小值', value: response.in_min }
                ]
              },
              markLine: {
                data: [
                  { type: 'average', name: '平均值', value: response.in_average }
                ]
              }
            },
            {
              name: '出站',
              type: 'bar',
              data: response.out_list,
              markPoint: {
                data: [
                  { name: '最高', value: response.out_max, xAxis: 7, yAxis: 183 },
                  { name: '最低', value: response.out_min, xAxis: 11, yAxis: 3 }
                ]
              },
              markLine: {
                data: [
                  { type: 'average', name: '平均值', value: response.out_average }
                ]
              }
            }
          ]
        })
      })
    }
  }
}
</script>
